<template>
   <div class="page-container">
    <md-app md-waterfall md-mode="fixed">
      <md-app-toolbar class="md-large md-dense md-primary">
      <div class="md-toolbar-row">
      <div class="md-toolbar-section-start">
        <md-button class="md-icon-button" @click="showNavigation = !showNavigation">
          <md-icon>menu</md-icon>
        </md-button>
        <span class="md-title">My Title</span>
        </div>
        <div class="md-toolbar-section-end">
<md-button class="md-icon-button">
            <md-icon>refresh</md-icon>
          </md-button>
          <md-button class="md-icon-button">
            <md-menu md-size="big" md-direction="top-start" :md-active.sync="toggleCard">
      <md-button class="md-icon-button" md-menu-trigger>
        <md-icon>
              <md-avatar class="avatar">
                <img src="../assets/avatar.png" alt="Avatar">
              </md-avatar>
        </md-icon>
      </md-button>

      <md-menu-content>
        <div class="author-card">
          <md-avatar class="md-large">
            <img src="../assets/avatar.png" alt="Avatar">
          </md-avatar>

          <div class="author-card-info">
            <span>Marcos Moura</span>
            <div class="author-card-links">
              <a href="https://linkedin.com/in/marcosvmmoura" target="_blank" rel="noopener">Linkedin</a>
              <a href="https://github.com/marcosmoura" target="_blank" rel="noopener">GitHub</a>
            </div>
          </div>
        </div>
      </md-menu-content>
    </md-menu>
          </md-button>
          </div>
        </div>
        <div class="md-toolbar-row">
          <md-tabs class="md-primary md-transparent" md-alignment="fixed">
            <md-tab id="tab-home" md-label="Home"></md-tab>
            <md-tab id="tab-pages" md-label="Pages"></md-tab>
            <md-tab id="tab-posts" md-label="Posts"></md-tab>
            <md-tab id="tab-favorites" md-label="Favorites"></md-tab>
          </md-tabs>
        </div>
      </md-app-toolbar>

    <md-app-drawer md-permanent="card" :md-active.sync="showNavigation">
      <md-toolbar class="md-transparent" md-elevation="0">
        <span class="md-title">My App name</span>
      </md-toolbar>

      <md-list>
        <md-list-item>
          <md-icon>move_to_inbox</md-icon>
          <span class="md-list-item-text">Inbox</span>
        </md-list-item>

        <md-list-item>
          <md-icon>send</md-icon>
          <span class="md-list-item-text">Sent Mail</span>
        </md-list-item>

        <md-list-item>
          <md-icon>delete</md-icon>
          <span class="md-list-item-text">Trash</span>
        </md-list-item>

        <md-list-item>
          <md-icon>error</md-icon>
          <span class="md-list-item-text">Spam</span>
        </md-list-item>
      </md-list>
    </md-app-drawer>

      <md-app-content>
        <router-view/>
      </md-app-content>
    </md-app>
    <md-speed-dial class="md-bottom-right" md-event="click">
      <md-speed-dial-target>
        <md-icon class="md-morph-initial">add</md-icon>
        <md-icon class="md-morph-final">close</md-icon>
      </md-speed-dial-target>

      <md-speed-dial-content>
        <md-button class="md-icon-button">
          <md-icon>note</md-icon>
        </md-button>

        <md-button class="md-icon-button">
          <md-icon>event</md-icon>
        </md-button>
      </md-speed-dial-content>
    </md-speed-dial>
  </div>
</template>

<style lang="less" scoped>
  .md-app {
    width: 100%;
    height: 100%;
    // max-height: auto;
    // border: 1px solid rgba(#000, .12);
    position: absolute;
    buttom: 0;
  }

   // Demo purposes only
  .md-drawer {
    width: 230px;
    max-width: calc(100vw - 125px);
  }

  .avatar {
    margin-top: -8px;
  }
  .md-menu,
  .toggle {
    margin: 24px;
  }

  .author-card {
    padding: 8px 16px;
    display: flex;
    align-items: center;

    .md-avatar {
      margin-right: 16px;
    }

    .author-card-info {
      display: flex;
      flex-flow: column;
      flex: 1;
    }

    span {
      font-size: 16px;
    }

    .author-card-links {
      display: flex;

      a + a {
        margin-left: 8px;
      }
    }
  }
</style>

<script>
export default {
  name: 'PageContainer',
  data: () => ({
    showNavigation: false,
    showSidepanel: false,
    toggleCard: false
  })
}
</script>
